<template>
  <div class="login bsb">
    <div class="form">
      <div class="logo">
        <img src="../../../assets/images/icon/logo_1.png" alt />
        <p>学乐佳区域负责人</p>
      </div>
      <div class="phone">
        <input type="text" placeholder="请输入帐号" class="innerphone" v-model="phoneCard" />
      </div>
      <div class="code">
        <input
          type="password"
          class="inner"
          minlength="6"
          maxlength="12"
          placeholder="请输入密码"
          v-model="password"
        />
      </div>
      <div class="sure" @click="login">登录</div>
    </div>
  </div>
</template>

<script>
  import { mapMutations } from "vuex";

  export default {
    name: "Login",
    data() {
      return {
        phoneCard: "",
        password: ""
      };
    },
    watch: {},
    created() {},
    methods: {
      ...mapMutations([
        "setXToken",
        "setUid",
        "setUserInfo",
        "setProxy_id",
        "setProxy_type"
      ]),
      //登录
      login() {
        var params = {
          type: 4,
          username: this.phoneCard,
          password: this.password
        };
        this.Http.login(params)
          .then(res => {
            // console.log(res);
            this.setUid(res.uid);
            this.setXToken(res.access_token);
            this.setProxy_id(res.proxy_id);
            this.setProxy_type(res.proxy_type);
            if (res.proxy_id) {
              this.Http.getProxyInfo({ proxy_id: res.proxy_id })
                .then(r => {
                  // console.log(r);
                  this.setUserInfo({...res, ...r});
                  this.$router.replace("/home");
                  // loginSucc(res);
                })
                .catch(err => {
                    this.$err(err);
                });
            }
          })
          .catch(e=>this.$toast(e.msg));
      }
    }
  };
</script>

<style lang="less" scoped>
  .login {
    padding-top: 2.47rem;
    width: 100vw;
    overflow: hidden;
    font-size: 1rem;
    text-align: center;
    background-color: #fff;
    min-height: 100vh;
    .form {
      margin: 0 auto;
      width: 89.33%;
      max-width: 18.75rem;
      .logo {
        margin-bottom: 60px;
        img {
          width: 180px;
          height: 180px;
          display: block;
          margin: 101px 209px 29px;
          // border-radius: 30px;
        }
        p {
          width: 100%;
          height: 40px;
          font-size: 42px;
          // font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 36px;
        }
      }
    }
    .phone,
    .code {
      text-align: left;
      height: 3.78rem;
      line-height: 3.78rem;
      font-size: 0.88rem;
      border-bottom: 0.03rem solid #dedede;
      color: #333;
    }
    .code {
      margin-bottom: 2.5rem;
    }
    .form .innerphone,.inner {
      width: 80%;
      height: 3.7rem;
    }
    .sure {
      color: #fff;
      line-height: 2.8rem;
      background-image: linear-gradient(to right, #0297ff, #14c7ff);
      border-radius: 0.31rem;
    }
  }
</style>
